<script setup lang="ts">
defineOptions({
  name: "gasBoardShiftTable"
});

import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowRightBold } from "@px-ui/icons-vue";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import modelBox from "@/views/common/components/modelBox/index.vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { queryGasBoardShiftData } from "@/api/modules/operation";
import dayjs from "dayjs";

const router = useRouter();

interface Props {
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), { dark: false });

const modelBoxTableRef = ref(null);
const commonTableRef = ref<InstanceType<typeof commonTable> | null>(null);
const gap = 38;
const defaultHeight = 200;
const tableHeight = ref<number>(defaultHeight);
const title = ref<string>("交接班");
const loading = ref<boolean>(false);
const tableData = ref<Array<any>>([]);

const tableCloumns: Array<CommonTable.TableCloumnsType> = [
  {
    label: "日期",
    prop: "date"
  },
  {
    label: "白班",
    prop: "DS"
  },
  {
    label: "夜班",
    prop: "NS"
  }
];

const toPageHandler = () => {
  const path = "/gas/handleover/list";
  const query = {};
  router.push({ path, query });
};

const init = async () => {
  const startDate = dayjs().subtract(1, "day").format("YYYY-MM-DD");
  const endDate = dayjs().format("YYYY-MM-DD");
  const classCode = "GAS";
  const params = { startDate, endDate, classCode };
  const res = await queryGasBoardShiftData(params);
  tableData.value = res?.reduce((pre, cur) => {
    const { shiftList = [] } = cur;
    const shiftNames = shiftList?.reduce(
      (pre, cur) => {
        const { shiftCode = "", person = [] } = cur;
        if (shiftCode.includes("D")) {
          pre["DS"] = person?.map(item => item.name).join("，");
        } else if (shiftCode.includes("N")) {
          pre["NS"] = person?.map(item => item.name).join("，");
        }
        return pre;
      },
      { DS: "", NS: "" }
    );
    pre.push({ ...cur, ...shiftNames });
    return pre;
  }, []);
};

onMounted(async () => {
  await init();
  await useUpdateDomHeight(tableHeight, modelBoxTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<template>
  <modelBox :title="title" :dark="dark">
    <template v-if="!dark" #title>
      <px-button class="px-button-arrow" :icon="ArrowRightBold" type="primary" text plain @click="toPageHandler" />
    </template>
    <div ref="modelBoxTableRef" v-loading="loading" class="gas-board-shift-table">
      <commonTable
        ref="commonTableRef"
        v-model="tableData"
        :dark="dark"
        mode="stripe"
        :border="false"
        :pagination="false"
        :image-size="50"
        :height="tableHeight"
        :tableCloumns="tableCloumns"
      />
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.px-button-arrow {
  padding-right: 0;
}

.gas-board-shift-table {
  width: 100%;
  height: 100%;
}
</style>
